<template>
  <el-container>
      <el-header>
        <el-switch
            style="display: block"
            v-model="method"
            active-color="#409EFF"
            inactive-color="#409EFF"
            active-text="可视化"
            inactive-text="树形">
        </el-switch>
      </el-header>
      <el-main >
        <role-view :view-method="method"></role-view>
      </el-main>
  </el-container>
</template>

<script>
import {RoleApi} from "@/core/request/api/RoleApi";
import RoleView from "@/components/roleComponents/roleView";

export default {
  name: "rolePage",
  data(){
    return {
      method:false
    }
  },
  components:{
    RoleView
  },
  methods:{
    reload(){
      RoleApi.getRolesByTree().then(res=>{
        if (res.data&&!res.data.code){
          let nodes = res.data.data.nodes;
          let roles = this.$store.state.user.roles = {};
          for (let i = 0; i < nodes.length; i++) {
            let item = nodes[i];
            roles[item.name]=item.label
          }
          let edges = res.data.data.edges;
          this.$store.state.role.nodes = nodes;
          this.$store.state.role.edges = edges;
        }
      })
    }
  },
  mounted() {
    this.reload();
  }
}
</script>

<style scoped>

</style>